<template>
  <header>
    <div class="header-main-topback">
      <div class="header-main-top">
        <span class="header-user">
          <span>尚品汇欢迎您！</span>
          <span v-if="!this.nickName">
            <span>请</span>

            <router-link to="/login" class="header-user-login"
              >登录</router-link
            >
            <router-link to="/register">免费注册</router-link>
          </span>
          <span v-else
            >{{ this.nickName }}
            <button @click="exit">exitLogin</button>
          </span>
        </span>
        <ul class="header-nav">
          <li>
            <a href="javascript:;">我的订单</a>
          </li>
          <li>
            <router-link to="/shopcarts">我的购物车</router-link>
          </li>
          <li>
            <a href="javascript:;">我的尚品汇</a>
          </li>
          <li>
            <a href="javascript:;">尚品汇会员</a>
          </li>
          <li>
            <a href="javascript:;">企业采购</a>
          </li>
          <li>
            <a href="javascript:;">关注尚品汇</a>
          </li>
          <li>
            <a href="javascript:;">合作招商</a>
          </li>
          <li>
            <a href="javascript:;">商家后台</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="header-main-bottomback">
      <div class="header-main-bottom">
        <router-link to="/">
          <img src="./logo.png" alt="logo" />
        </router-link>
        <form class="header-search" @submit.prevent="goSearch">
          <input type="text" v-model="keyword" />
          <button type="submit">搜索</button>
        </form>
      </div>
    </div>
  </header>
</template>

<script>
import { mapState ,mapActions} from "vuex";
export default {
  name: "Header",
  data() {
    return {
      keyword: this.$route.params.keyword,
    };
  },
  computed: {
    ...mapState("login", ["nickName"]),
  },
  MOUNTED() {},
  methods: {
     ...mapActions("login",["logout"]),
    async exit() {
      await this.logout()
      location.reload()
    },

    goSearch() {
      const {
        keyword,
        $route: { query },
      } = this;
      const location = { name: "Search" };
      // 如果有query参数，添加上
      location.query = query;
      // 可选params，当值为空不能添加
      if (keyword) {
        location.params = { keyword };
      }
      this.$router.history.push(location);
    },
  },
};
</script>
<style lang="less" scoped>
.main {
  width: 1200px;
  margin: 0 auto;
}
.display-center {
  display: flex;
  align-items: center;
}
.display-center(2) {
  .display-center();
}
.display-center(3) {
  .display-center();
  justify-content: space-between;
}
.search {
  outline: none;
  height: 35px;
  font-size: 14px;
}
.font-border {
  border-left: 1px solid black;
  padding-left: 8px;
  margin-left: 8px;
}

//less
header {
  width: 100%;
  min-width: 1200px;
}
.header-main-topback {
  background-color: #eaeaea;
  .header-main-top {
    .main();
    height: 35px;
    .display-center(3);
    a {
      color: #333;
    }
    .header-user-login {
      .font-border();
    }
    .header-nav {
      display: flex;
      li + li {
        .font-border();
      }
      a:hover {
        color: rgb(79, 76, 212);
      }
    }
  }
}
.header-main-bottom {
  .main();
  height: 65px;
  .display-center(3);
  .header-search {
    .display-center(2);
    input {
      .search();
      width: 500px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #ea4a36;
    }
    button {
      .search();
      width: 80px;
      border: 0;
      color: white;
      background-color: #ea4a36;
    }
  }
}
</style>